<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>钉钉配置</title>
    <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}"/>
    <script th:src="@{/inc/common.js}"></script>
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
    <script th:src="@{/js/jquery-alerts/jquery.alerts.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery-alerts/cws.alerts.js}" type="text/javascript"></script>
    <link th:href="@{/js/jquery-alerts/jquery.alerts.css}" rel="stylesheet" type="text/css" media="screen"/>
    <link th:href="@{/js/jquery-showLoading/showLoading.css}" rel="stylesheet" media="screen" />
    <script type="text/javascript" th:src="@{/js/jquery-showLoading/jquery.showLoading.js}"></script>
    <script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}" media="all">
</head>
<body>
<TABLE cellSpacing=0 cellPadding=0 width="100%">
    <TBODY>
    <TR>
        <TD class="tdStyle_1">钉钉配置</TD>
    </TR>
    </TBODY>
</TABLE>
<br>
<table width="100%" class="tabStyle_1 percent80" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3" class="tabStyle_1_title">配置管理</td>
    </tr>

    <tr th:each="ary : ${arys}">
        <form method="post" th:id="'form'+${ary.k}" th:name="'form'+${ary.k}" data-form-id="${ary.k}" >
<!--            <form method="post" th:id="'form'+${ary.k}" th:name="'form'+${ary.k}" data-th-form-id="${ary.k}" action="/configDingding">-->
            <td width='52%'><input type="hidden" name="name" th:value="${ary.name}"/>
                &nbsp;[[${ary.desc}]]
            </td>
            <td width='34%'>
                <th:block th:if="${ary.type1}">
                    <select th:id="'attr'+${ary.k}" name="value">
                        <option value="true">
                            是
                        </option>
                        <option value="false">
                            否
                        </option>
                    </select>
                    <script>
                        $('[[${ary.attr}]]').val("[[${ary.value}]]");
                    </script>
                </th:block>
                <th:block th:if="${ary.type2}">
                    <th:block th:if="${ary.type3}">

                            <input type="text" name="value" th:value="${ary.value}">

                    </th:block>
                    <th:block th:if="${ !ary.type1 && ary.type2 && !ary.type3}">
                        <th:block th:if="${ary.name} == 'isSyncDingDingToOA'">
                            <select th:id="'attr' +${ary.k}" name="value">
                                <option th:each="aryOpt1 : ${ary.aryOpts1}" th:value="${aryOpt1.aryOpts0}" th:text="${aryOpt1.aryOpts1}">
                                </option>
                            </select>
                        </th:block>
                        <th:block th:if="${ary.name} == 'isUserIdUse'">
                            <select th:id="'attr' +${ary.k}" name="value">
                                <option th:each="aryOpt2 : ${ary.aryOpts2}" th:value="${aryOpt2.aryOpts0}" th:text="${aryOpt2.aryOpts1}">
                                </option>
                            </select>
                        </th:block>
                        <script>
                            $(function () {
                                $('[[${ary.attr}]]').val('[[${ary.value}]]');
                            })
                        </script>
                    </th:block>

                </th:block>
            </td>
            <td width="14%" align="center">
<!--                <input class="btn btn-default" th:onclick="|xg('form'+${ary.k})|" type="submit" name='edit' value='修改'/>-->
                <input class="btn btn-default" type="submit" name='edit' value='修改'/>
<!--                <input class="btn btn-default" type="button" name='edit' value='修改' th:attr="onclick=|handleSumbit('form'+${ary.k})|"/>-->


            </td>
        </form>
    </tr>
    <tr>
        <td>从钉钉同步帐户(userid)至系统，只需在初始化时同步一次</td>
        <td colspan="2">
            <input id="btnSyn" class="btn" type="button" value="同步用户" title="根据配置'钉钉帐户与系统用户关联字段'同步钉钉的用户帐户(userid)至用户表中dingding字段" th:onclick="|sync()|"/>
        </td>
    </tr>
</table>
</body>
<script th:inline="javascript">
    function sync() {
        jConfirm('您确定要同步么？', '提示', function(r) {
            if (r) {
                $.ajax({
                    type: "post",
                    url: "../user/synAll.do",
                    contentType:"application/x-www-form-urlencoded; charset=iso8859-1",
                    data: {
                        op: "syncDing"
                    },
                    dataType: "html",
                    beforeSend: function(XMLHttpRequest){
                        $('body').showLoading();
                    },
                    success: function(data, status){
                        data = $.parseJSON(data);
                        jAlert(data.msg, "提示");
                    },
                    complete: function(XMLHttpRequest, status){
                        $('body').hideLoading();
                    },
                    error: function(XMLHttpRequest, textStatus){
                        // 请求出错处理
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }
        });
    }

    // function handleSumbit(formId) {
    //     var params = $("#" + formId).serialize();
    //     $.ajax({
    //         url: "../public/dingding/configAgent",
    //         dataType: 'json',// 服务器返回json格式数据
    //         type: 'post',// HTTP请求类型
    //         data: params,
    //         processData: false,
    //         contentType: false,
    //         beforeSend: function (XMLHttpRequest) {
    //             $('body').showLoading();
    //         },
    //         complete: function (XMLHttpRequest, status) {
    //             $('body').hideLoading();
    //         },
    //         success: function (data) {
    //             layer.msg(data.msg, {
    //                 offset: '6px'
    //             });
    //         },
    //         error: function (xhr, type, errorThrown) {
    //             console.log(type);
    //         }
    //     });
    //     return;
    // }


    // function submitDynamicForm(submit) {
    //     // 获取包含该按钮的表单
    //     var form = submit.closest('form');
    //     // 使用data属性来获取表单ID的后缀
    //     var formIdSuffix = form.getAttribute('data-form-id');
    //     // 构造完整的表单ID并提交
    //     var formId = 'form' + formIdSuffix;
    //     // 注意：这里我们其实不需要重新获取form，因为我们已经有了它的引用
    //     // 但为了演示，我们还是按照你的要求来做
    //     var formToSubmit = document.getElementById(formId);
    //     if (formToSubmit) {
    //         formToSubmit.submit();
    //     } else {
    //         console.error('Form with ID ' + formId + ' not found!');
    //     }
    // }

    $(function () {

        $('.btn btn-default').click(function(e) {
            e.preventDefault();
            var form = submit.closest('form');
            // 使用data属性来获取表单ID的后缀
            var formIdSuffix = form.getAttribute('data-form-id');
            // 构造完整的表单ID并提交
            var formId = 'form' + formIdSuffix;
            var formData = $('#' + formId).serialize(); // 序列化对应表单的数据

            $.ajax({
                async: false,
                type: "post",
                url: "configDingding",
                data: formData,
                dataType: "json",
                beforeSend: function (XMLHttpRequest) {
                    $('body').showLoading();
                },
                complete: function (XMLHttpRequest, status) {
                },
                success: function (data, status) {
                    $('body').hideLoading();
                    layer.alert(data.msg, '提示');
                },
                error: function (XMLHttpRequest, textStatus) {
                    $('body').hideLoading();
                    alert(XMLHttpRequest.responseText);
                }
            });
        });
    });
</script>
</html>